<template>

    <div class="head">
      <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        popover-action-width="190px"
        class="back"
        :style="(width = -10)"
      />


      <van-popover
        v-model="showPopover"
        theme="dark"
        trigger="click"
        :actions="actions"
        placement:bottom-start
        class="blackbox"
        @select="onSelect"
      >
        <template #reference>
          <van-button
            type="primary"
            style="background-color: white; color: black; border: none;font-weight:900;margin-right:-20px;"
            class="button"
            >...</van-button
          >
        </template>
      </van-popover>
     </div>
 
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  name: "GoodsDetailHeader",
  components: {
  },
  data() {
    return {
      showPopover: false,
      actions: [{ text: "首页" }, { text: "消息通知" }, { text: "收藏夹" }],
    };
  },
  methods: {
   onClickLeft() {
      this.$router.push("/Goods");
    },
    onSelect(action, number) {
      // console.log(this,"this"),
      console.log(action, number);
      Toast(action.text);
      if (number == 0) {
        this.$router.push("/Home");
      } else if (number == 1) {
        this.$router.push("/Goods/Information");
      } else {
        this.$router.push("/Goods/Collection");
      }
    },
  },
  created() {
   
  },
};
</script>

<style scoped>

.back {
  color: black !important;
 
  height: 100%;
  width: 2.9rem;
}
::v-deep .van-popover__content {
   
    width: .1rem !important;
    color: #4a4a4a;
}
.button{
width: 1.2rem;
text-align: right;
margin-right: .2rem;
 display: block;
 border: none;
 outline: none;
}
.head {
    width: 3.7rem;
  display: flex;
  background-color: white;
 
}

.box .head .van-popover__wrapper {
    height: 100%;
  background-color: black;
  width: .3rem;
  opacity: 0.5;
}


/* ::v-deep .blackbox {
  text-align: right;
  width: 160px;
  margin-right: 0.1rem;
  background-color: royalblue;
} */
.down-box:active {
  display: block;
}
.down-box p {
  height: 0.2rem;
  width: 0.6rem;
  font-size: 0.1rem;
}

</style>
